<template>
    <div class="btt_container">

        <div id="btt" class="backtop">
            <!-- <el-tooltip effect="light" placement="left">
                <div slot="content" class="hot_tel_tip_wrap">
                    电话：+86-20-3205-3456
                </div>

                <div class="btns hot_tel">
                    <span class="icon"><i class="vue-icon-phone"></i></span>
                    <span class="text">咨询热线</span>
                </div>
            </el-tooltip>

            <el-tooltip class="item" effect="light" placement="left">
                <div slot="content">
                    <img :src="p4"/>
                </div>
                <div class="btns wechat">
                    <span class="icon"><i class="vue-icon-wechat"></i></span>
                    <span class="text">关注我们</span>
                </div>
            </el-tooltip> -->

            <div class="btns back_top" @click="backTop">
                <span class="icon">
                    <i class="el-icon-arrow-up"></i>
                </span>
                <span class="text">TOP</span>
            </div>
        </div>
    </div>
</template>
<script>
import p4 from '@/assets/images/wi/4.png'
export default {
    name: "index",
    components: {
    },
    data() {
        return {
            p4
        }
    },

    created() {

    },
    mounted() {
        this.$nextTick(() => {
            window.addEventListener('scroll', this.scrollToTop)
        })
    },
    destroyed () {
        window.removeEventListener('scroll', this.scrollToTop);
    },
    methods: {

        /**
         * 滚动到指定高度，显示返回顶部按钮
         */
        scrollToTop() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

            let topBtn = document.getElementById('btt');
            if (scrollTop > 300) {
                topBtn.style.display = 'block';
            } else {
                topBtn.style.display = 'none';
            }
        },
        /**
         * 点击返回顶部
         */
        backTop() {
            document.documentElement.scrollTop = 0;
        }
    }
};
</script>

<style lang="scss" scope>
.backtop{
    width: 60px;
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 1111;
    display: none;



    .btns{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 10px;
        margin: 10px 0;
        cursor: pointer;

        .icon{
            font-size: 22px;
            color: #98000A;
        }
        .text{
            font-size: 12px;
            // transform: scale(0.6);  /* 字体显示效果为8px */
        }
    }


    .hot_tel{

    }
    .wechat{

    }
    .back_top{
        .icon{
            color: #fff;
        }
        background: #98000A;
        color: #fff;
    }
}
.el-tooltip__popper.is-light{
    border: 0px solid #98000A;
}
.el-tooltip__popper{
    .hot_tel_tip_wrap{
        color: #98000A;
        font-size: 18px;
        padding: 10px;
    }
}
.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{
    border-left-color: #fff;
}
</style>
